body {
  .ant-popover-open {
    color: @primary-color !important;
  }
  .show-new-words {
    .ant-popover-open {
      color: #FF9D00 !important;
    }
  }
  .study-popover.ant-popover-placement-bottomRight,
  .study-popover.ant-popover-placement-topRight
   {
    .ant-popover-content {
      & > .ant-popover-arrow {
        border-color: #27bfa3;
        box-shadow: none;
      }
      .ant-popover-inner {
        background: linear-gradient(
          90deg,
          rgba(88, 229, 196, 1) 0%,
          rgba(39, 191, 163, 1) 100%
        );
        .ant-popover-inner-content {
          padding: 0;
          color: #fff;
          font-weight: 700;
        }
        .study-pop-content {
          display: block;
          padding: 12px 16px;
        }
      }
    }
  }
  .study-popover__disabled.ant-popover-placement-bottomRight,
  .study-popover__disabled.ant-popover-placement-topRight {
    .ant-popover-content {
      & > .ant-popover-arrow,
      & > {
        border-top-color: #e3e3e3;
        border-left-color: #e3e3e3;
        box-shadow: none;
      }
      .ant-popover-inner {
        background: #e3e3e3;
        .ant-popover-inner-content {
          padding: 0;
          color: #fff;
          font-weight: 700;
        }
        .study-pop-content {
          display: block;
          padding: 12px 16px;
        }
      }
    }
  }
  .lookup-popover.ant-popover-placement-bottom,
  .lookup-popover.ant-popover-placement-top {
    .ant-popover-content {
      .ant-popover-arrow {
        background-color: #27bfa3;
        border-color: #27bfa3;
        box-shadow: none;
      }
      .ant-popover-inner {
        background-color: #27bfa3;
        border-radius: 10px;
        .ant-popover-inner-content {
          padding: 20px;
        }
      }
    }
  }
  .lookup-popover {
    .lookup-content {
      color: #fff;
      width: 260px;
      padding: 0 2px;
      & > div {
        color: #fff;
      }
      .title {
        font-weight: 700;
        font-size: 24px;
        word-break: break-all;
        & > img {
          margin-left: 6px;
          cursor: pointer;
        }
      }
      .translate {
        margin: 10px 0;
        font-size: 16px;
      }
      .icon-img {
        width: 16px;
        margin-right: 10px;
      }
      .btn-group {
        display: flex;
        justify-content: space-between;
        & > a {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 120px;
          height: 34px;
          border: 1px solid #99E2D4; /* no */
          font-size: 14px;
          color: #8df4e0;
          padding: 7px 16px;
          border-radius: 6px; /* no */
          &:nth-child(1) {
            &[disabled] {
              color: #60ceb9;
              border-color: #60ceb9;
            }
          }
        }
      }
    }
    .lookup-paragraph-content {
      font-size: 24px;
      box-sizing: border-box;
      .title {
        color: #fff;
        font-size: 24px;
      }
      .icon-img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 2px;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
      .title-translate {
        font-size: 24px;
        color: #fff;
      }
    }
  }
  // button
  .ant-btn {
    font-size: 18px;
    height: 50px;
    min-width: 130px;
    border: none;
    outline: 0;
  }
  .ant-btn-primary {
    background: linear-gradient(
      359deg,
      rgba(71, 203, 179, 1) 0%,
      rgba(81, 211, 176, 1) 100%
    );
    box-shadow: 0px 5px 10px rgba(59, 201, 164, 0.3);
    &[disabled] {
      background: #ededed;
      color: #c6c6c6;
      &:hover {
        background: #ededed;
        color: #c6c6c6;
      }
    }
    &.active,
    &:active,
    &:focus {
      background: linear-gradient(
        359deg,
        rgba(71, 203, 179, 1) 0%,
        rgba(81, 211, 176, 1) 100%
      );
      box-shadow: 0px 5px 10px rgba(59, 201, 164, 0.3);
    }
    &:hover {
      background: linear-gradient(
        359deg,
        rgba(39, 178, 152, 1) 0%,
        rgba(52, 203, 163, 1) 100%
      );
      box-shadow: 0px 5px 10px rgba(59, 201, 164, 0.3);
    }
    &.ant-btn-background-ghost {
      box-shadow: none;
      border: 2px solid #27bfa3;
    }
  }

  //   drop menu
  .ant-dropdown-menu-item:hover,
  .ant-dropdown-menu-submenu-title:hover {
    background-color: #fff;
    color: @primary-color;
  }

  // modal
  .ant-modal-content {
    border-radius: 10px; /* no */
  }
  .ant-modal-body {
    padding: 20px 40px 40px;
  }
  .ant-modal-close {
    top: 20px; /* no */
    right: 22px; /* no */
    width: 20px;
    height: 20px;
    background: url('~assets/home/close.png') center/ 20px 20px;
    
    .ant-modal-close-x {
      display: none;
    }
  }
  // slider
  .ant-slider {
    height: 20px; /* no */
    margin: 0;
    padding: 0;
    &:hover {
      .ant-slider-track {
        background-color: @primary-color;
      }
      .ant-slider-rail {
        background-color: transparent;
      }
    }
    .ant-slider-rail {
      height: 20px; /* no */
      border-radius: 10px; /* no */
      border: 2px solid rgba(37, 181, 154, 1); /* no */
    }
    .ant-slider-handle {
      width: 30px; /* no */
      height: 30px; /* no */
      border: none;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
    }
  }
  .ant-slider-track {
    background-color: @primary-color;
    height: 20px; /* no */
    border-radius: 10px; /* no */
  }
  .ant-slider-step {
    height: 20px; /* no */
    border-radius: 10px; /* no */
    cursor: default;
  }

  // tab
  .ant-tabs-bar {
    display: none;
  }

  // textarea
  textarea.ant-input {
    background-color: #f7f7f7;
    border: none;
  }

  // radio
  .ant-radio-inner {
    width: 20px; /* no */
    height: 20px; /* no */
    border-width: 2px; /* no */
  }
  .ant-radio-inner::after {
    width: 12px; /* no */
    height: 12px; /* no */
    top: 2px; /* no */
    left: 2px; /* no */
  }




  // 登录 INput

    // form
    .ant-form-item-children {
      display: flex;
    }
    // 正常
    .ant-input-affix-wrapper {
      border-bottom: 1px solid #e0e0e0;
      /* no */
      display: flex;
      align-items: center;
      position: static;
  
      .ant-input-prefix {
        position: static;
        transform: translateY(0px);
  
        .anticon {
          margin-right: 6px;
          /* no */
        }
      }
  
      .ant-input-suffix {
        position: static;
        transform: translateY(0px);
      }
  
      .ant-input {
        border-radius: 0;
        border: none;
        text-indent: 10px;
        flex: 1;
  
        &:focus {
          background-color: transparent;
          box-shadow: none;
        }
  
        &:not(:first-child) {
          padding-left: 10px;
          /* no */
          padding-right: 0;
        }
      }
    }
  
}
